<template>
  <h2>{{ route.meta.title }}</h2>
  <div class="header">
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="时间:">
        <el-date-picker v-model="formInline.startTime"
                        style="width: 100px"
                        value-format="YYYY-MM-DD"
                        type="date" />
        <span>到</span>
        <el-date-picker v-model="formInline.endTime"
                        style="width: 100px"
                        value-format="YYYY-MM-DD"
                        type="date" />
      </el-form-item>
      <el-form-item label="开门方式">
        <el-select v-model="formInline.openDoor">
          <el-option label="全部"
                     value="全部" />
          <el-option label="扫码开门"
                     value="扫码开门" />
          <el-option label="自习室内开门"
                     value="自习室内开门" />
          <el-option label="后台开门"
                     value="后台开门" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit">点击开门</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格暂时内容 -->
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="date"
                       label="开门时间"
                       width="280" />
      <el-table-column prop="openDoor"
                       label="开门方式"
                       width="180" />
      <el-table-column prop="peoplePhone"
                       label="开门人手机" />
    </el-table>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute()
    const data = reactive({
      // 数据
      formInline: {
        startTime: '',
        endTime: '',
        openDoor: '全部'
      },
      // 需要日期,开门类型 ,用户手机号码
      tableData: [
        { date: '2022-10-22 10:20:12', openDoor: '扫码开门', peoplePhone: '12346578' },
        { date: '2022-10-22 10:20:12', openDoor: '后台开门', peoplePhone: '' },
      ],
      // 方法
      onSubmit () {
        console.log(data.formInline)
      }
    })

    return { ...toRefs(data), route }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin: 0;
  font-size: 18px;
}
.el-form {
  box-sizing: border-box;
  padding-top: 14px;
  margin-top: 1rem;
  background-color: #d7d7d7;
}
.el-form-item:nth-of-type(1) {
  margin-left: 10px;
  width: 21%;
}

.el-form-item input {
  width: 60px;
}

.el-form-item:nth-of-type(1) span {
  transform: translateX(1px);
}

.el-form-item:nth-of-type(2) {
  width: 56%;
}

.el-table {
  margin-top: 1%;
}
</style>